<!--
 * @Author: OBKoro1
 * @Date: 2022-03-07 10:29:45
 * @LastEditors: yangyongtao
 * @LastEditTime: 2023-11-28 16:57:39
 * @FilePath: \onemodeSWJ\src\views\paramPlanManage\mainDataManage\mainDataAdd.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by 用户/公司名, All Rights Reserved. 
-->
<template>
  <el-table
    :data="planData"
    border
    size="small"
    style="width: 50%; margin-bottom: 10px"
  >
    <el-table-column label="总参数方案信息" align="center">
      <el-table-column prop="name" label="名称" align="center" />
      <el-table-column prop="reservoir" label="库区" align="center" />
      <el-table-column prop="river" label="干流" align="center" />
      <el-table-column prop="createName" label="创建人" align="center" />
      <el-table-column prop="createComment" label="备注" align="center" />
    </el-table-column>
  </el-table>

  <el-form
    :model="mainData"
    :inline="true"
    label-width="auto"
    class="sedFormInput"
  >
    <div class="form-box">
      <el-form-item label="河床分层厚度h/(m)">
        <el-input
          v-for="(ele, i) in mainData['ch']"
          :key="i"
          v-model="mainData['ch'][i]"
          type="number"
        />
      </el-form-item>
    </div>

    <div class="form-box">
      <el-form-item label="泥沙粒径级配总分组">
        <el-input
          v-for="(ele, i) in mainData['sed_num']"
          :key="i"
          v-model="mainData['sed_num'][i]"
          type="number"
        />
      </el-form-item>

      <el-form-item label="悬移质泥沙组数">
        <el-input
          v-for="(ele, i) in mainData['sed_x_num']"
          :key="i"
          v-model="mainData['sed_x_num'][i]"
          type="number"
        />
      </el-form-item>
    </div>

    <div class="form-box">
      <el-form-item label="泥沙分组粒径d(mm)">
        <el-input
          v-for="(ele, i) in mainData['sedd']"
          :key="i"
          v-model="mainData['sedd'][i]"
          type="number"
        />
      </el-form-item>
    </div>

    <div class="form-box">
      <el-form-item label="总床沙级配(%)">
        <el-input
          v-for="(ele, i) in mainData['csp']"
          :key="i"
          v-model="mainData['csp'][i]"
          type="number"
        />
      </el-form-item>
    </div>

    <div class="form-box">
      <el-form-item label="悬沙级配(%)">
        <el-input
          v-for="(ele, i) in mainData['ssp']"
          :key="i"
          v-model="mainData['ssp'][i]"
          type="number"
        />
      </el-form-item>
    </div>

    <div class="form-box">
      <el-form-item label="总挟沙力系数">
        <el-input
          v-for="(ele, i) in mainData['km']"
          :key="i"
          v-model="mainData['km'][i]"
          type="number"
        >
          <template #prefix>
            {{ i == 0 ? "K=" : "m=" }}
          </template>
        </el-input>
      </el-form-item>
    </div>

    <div class="form-box">
      <el-form-item label="总冲淤系数">
        <el-input
          v-for="(ele, i) in mainData['ed']"
          :key="i"
          v-model="mainData['ed'][i]"
          type="number"
        >
          <template #prefix>
            {{ i == 0 ? "e=" : i == 1 ? "d=" : "m=" }}
          </template>
        </el-input>
      </el-form-item>
    </div>

    <div class="form-box">
      <el-form-item label="初始含沙量(kg/m³)">
        <el-input
          v-for="(ele, i) in mainData['sc']"
          :key="i"
          v-model="mainData['sc'][i]"
          type="number"
        />
      </el-form-item>
    </div>
  </el-form>

  <el-button
    style="
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      margin-top: 20px;
    "
    type="primary"
    @click="planSubmit"
  >
    方案保存
  </el-button>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  provide,
  watch,
  inject,
  reactive,
  toRefs,
  onMounted,
} from "vue";
import { useStore } from "vuex";
import { RouteParams, useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";

import {
  searchNstjArguments,
  searchNstjArgumentsInfo,
  delNstjArguments,
  editNStjArguments,
} from "@/request/api";

export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();
    const store = useStore();

    const state: {
      mainData: any;
      planData: RouteParams[];
    } = reactive({
      // 主要条件方案数据
      planData: [{}],

      // 初始化参数
      mainData: {},
    });

    onMounted(() => {
      state.planData[0] = route.params;
      console.log(state.planData, "保存参数");

      getReadSediment();
    });

    /**
     * @description: 初始化参数获取
     * @param {*}
     * @return {*}
     */
    function getReadSediment() {
      // 获取初始化参数数据
      searchNstjArguments({
        id: route.params.id,
        reservoir: route.params.reservoir,
        river: route.params.river,
        Fatype: "fa",
      }).then((res: any) => {
        for (const key in res.data) {
          state.mainData[key] = res.data[key].replace(/\s/g, "").split(",");
        }
      });
    }

    /**
     * @description: 初始化参数方案修改
     * @return {*}
     */
    function planSubmit() {
      // 处理参数部分 转成string
      let obj = {};
      for (const key in state.mainData) {
        obj[key] = state.mainData[key].join(",");
      }

      editNStjArguments({
        id: state.planData[0].id,
        createName: state.planData[0].createName,
        name: state.planData[0].name,
        reservoir: state.planData[0].reservoir,
        river: state.planData[0].river,
        data: JSON.stringify({ data: JSON.stringify(obj) }),
      }).then((res: any) => {
        if (res.code == 1) {
          ElMessage.success(res.msg);
          setTimeout(() => {
            router.push({
              name: "mainDataList",
            });
          }, 1000);
        } else {
          ElMessage.error(res.msg);
        }
      });
    }

    return {
      ...toRefs(state),

      getReadSediment,
      planSubmit,
    };
  },
});
</script>

<style scoped lang="less">
.sedFormInput {
  margin-bottom: 20px;
  .form-box {
    display: flex;
  }
  .el-input {
    width: 100px;
    margin: 0 4px 8px 0;
  }
}
</style>
